<!--动态组件-->
<script setup lang="ts">
import TrendsA from "./Trends-A.vue";
import TrendsB from "./Trends-B.vue";
import TrendsC from "./Trends-C.vue";
import {markRaw, reactive, ref, shallowRef} from "vue";

const data = reactive([
  {
    name: 'A组件',
    com: markRaw(TrendsA)
  },
  {
    name: 'B组件',
    com: markRaw(TrendsB)
  },
  {
    name: 'C组件',
    com: markRaw(TrendsC)
  }
])
const active = ref(0)
//shallowRef只到组件层,避免获得过多组件信息造出浪费
const comId = shallowRef(TrendsA)
const switchCom = (item, index) => {
  comId.value = item.com
  active.value = index
}
</script>

<template>
  <div style="display: flex">
    <div @click="switchCom(item,index)" :class="[active==index?'ac':'']" class="tabs" v-for="(item,index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<style scoped lang="scss">
.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
}

.active {
  background-color: #646cff;
}
</style>